<template>
  <div>
    <canvas id="canvas"></canvas>    
  </div>
</template>

<script setup>
import { nextTick,onMounted } from 'vue';

function draw() {
  const dom = document.getElementById('canvas');
  console.log(dom);
  const ctx = dom.getContext('2d');
  // ctx.beginPath();
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 100, 100); 

  // ctx.beginPath();
  ctx.fillStyle = 'bule'
  ctx.strokeRect(0,100,50,50)
}


function canvassetInterval(){
  const dom = document.getElementById('canvas'); 
  const ctx = dom.getContext('2d');

  let height   =0
  ctx.strokeRect(0,0,200 , 100)
  ctx.fillRect(100,50,200,100)
  console.log('  dom.clientHeight------<<',dom.clientHeight)
  let ti = setInterval(()=>{
    ++height
    ctx.clearRect(0,0,dom.clientWidth,height)
    if(dom.clientHeight < height){
      clearInterval(ti)
    } 
  },10)


};


function drawFace(){
  const dom = document.getElementById('canvas'); 
  const ctx = dom.getContext('2d');

  ctx.beginPath();
  ctx.arc(100,100,50,0,Math.PI*2)
  ctx.stroke()
  ctx.closePath();

  ctx.beginPath()
  ctx.arc(80,80,10,0,2*Math.PI)
  ctx.stroke()
  ctx.closePath();
  ctx.beginPath()
  ctx.arc(120,80,10,0,2*Math.PI)
  ctx.stroke()
  ctx.closePath();
  ctx.beginPath()
  ctx.arc(100,105,20,0,2*Math.PI)
  ctx.stroke()
  ctx.closePath();
  
  ctx.beginPath()
  ctx.arc(100,120,20,0, Math.PI/2)
  // ctx.tx.rotate((45 * Math.PI) / 180);
  // ctx.moveTo(80,80)
  ctx.rotate((60 * Math.PI) / 180);
  ctx.stroke()
  ctx.closePath(); 

}


function drawArcTo(){
  const dom = document.getElementById('canvas'); 
  const ctx = dom.getContext('2d');

  console.log(ctx)

  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.arcTo(100,100,200,200,50)
  ctx.closePath();
}

// 画对话框
function drawDialogue(){
  const dom = document.getElementById('canvas'); 
  const ctx = dom.getContext('2d');

  ctx.beginPath();

  ctx.moveTo(70,120);
  ctx.quadraticCurveTo( 30, 120, 30, 60 ); 
  ctx.quadraticCurveTo( 30, 20, 100, 20 ); 
  ctx.quadraticCurveTo( 200,20, 200, 60 ); 
  ctx.quadraticCurveTo( 200,100, 100,120 ); 
  ctx.quadraticCurveTo( 100,150, 50,140 ); 
  ctx.quadraticCurveTo( 70,140, 70,120 ); 

  ctx.stroke();

  // ctx.rect(10, 10, 150, 100);
  // ctx.stroke();

  ctx.closePath();  
  
}


function drawHeartShape(){
  const dom = document.getElementById('canvas'); 
  const ctx = dom.getContext('2d'); 
  ctx.beginPath();
  ctx.moveTo(150,55);
  ctx.bezierCurveTo(180,30,220,45,150,140);    
  ctx.bezierCurveTo(80,140,80,45,150,55);   

  ctx.stroke();
  ctx.closePath();

}


onMounted(()=>{ 
  // draw();
  // canvassetInterval()
  // drawFace()
  // drawArcTo();
  // drawDialogue();
  drawHeartShape();
})


// nextTick(() => {
//   draw();
// });
</script>

<style>

</style>